/**
 * 加载管理器
 * 支持两种加载模式：
 * 1. 项目加载（双阶段：项目 + 场景）
 * 2. 场景加载（单阶段：仅场景）
 */
export class SceneLoader {
    constructor() {
        // 当前使用的overlay
        this.currentOverlay = null;
        this.mode = null; // 'project' 或 'scene'
        
        // 元素引用（延迟初始化）
        this.projectOverlay = null;
        this.sceneOverlay = null;
        this.projectStageIcon = null;
        this.projectStagePercent = null;
        this.projectStageBar = null;
        this.projectStageDetail = null;
        this.sceneStageIcon = null;
        this.sceneStagePercent = null;
        this.sceneStageBar = null;
        this.sceneStageDetail = null;
        this.projectItemsList = null;
        this.singleSceneIcon = null;
        this.singleScenePercent = null;
        this.singleSceneBar = null;
        this.singleSceneDetail = null;
        this.sceneItemsList = null;
        
        // 通用元素
        this.spinner = null;
        this.title = null;
        this.subtitle = null;
        
        // 进度状态
        this.currentProgress = 0;
        this.totalItems = 0;
        this.loadedItems = 0;
        this.loadingItems = new Map();
        
        // 是否已初始化
        this.initialized = false;
    }
    
    /**
     * 初始化DOM元素引用
     */
    initializeElements() {
        if (this.initialized) return;
        
        // 两个加载界面
        this.projectOverlay = document.getElementById('project-loading-overlay');
        this.sceneOverlay = document.getElementById('scene-loading-overlay');
        
        // 项目加载模式的元素
        this.projectStageIcon = document.getElementById('project-stage-icon');
        this.projectStagePercent = document.getElementById('project-stage-percent');
        this.projectStageBar = document.getElementById('project-stage-bar');
        this.projectStageDetail = document.getElementById('project-stage-detail');
        
        this.sceneStageIcon = document.getElementById('scene-stage-icon');
        this.sceneStagePercent = document.getElementById('scene-stage-percent');
        this.sceneStageBar = document.getElementById('scene-stage-bar');
        this.sceneStageDetail = document.getElementById('scene-stage-detail');
        
        this.projectItemsList = document.getElementById('project-loading-items-list');
        
        // 场景加载模式的元素
        this.singleSceneIcon = document.getElementById('single-scene-icon');
        this.singleScenePercent = document.getElementById('single-scene-percent');
        this.singleSceneBar = document.getElementById('single-scene-bar');
        this.singleSceneDetail = document.getElementById('single-scene-detail');
        
        this.sceneItemsList = document.getElementById('scene-loading-items-list');
        
        this.initialized = true;
    }
    
    /**
     * 显示项目加载界面（双阶段）
     * @param {boolean} isInitial - 是否是初始显示（页面加载时）
     */
    showProjectLoading(isInitial = false) {
        // 确保元素已初始化
        this.initializeElements();
        
        this.mode = 'project';
        this.currentOverlay = this.projectOverlay;
        
        if (!this.currentOverlay) {
            console.error('❌ 项目加载界面元素未找到');
            return;
        }
        
        // 隐藏场景加载界面（如果显示）
        if (this.sceneOverlay) {
            this.sceneOverlay.style.display = 'none';
        }
        
        // 显示项目加载界面（如果还未显示）
        if (!isInitial) {
            this.currentOverlay.style.display = 'flex';
        }
        this.currentOverlay.classList.remove('fade-out');
        
        // 获取通用元素
        this.spinner = this.currentOverlay.querySelector('.loading-spinner');
        this.title = this.currentOverlay.querySelector('.loading-title');
        this.subtitle = this.currentOverlay.querySelector('.loading-subtitle');
        
        // 重置状态
        this.currentProgress = 0;
        this.loadedItems = 0;
        this.loadingItems.clear();
        
        // 立即重置进度条
        if (this.projectStageBar) {
            this.projectStageBar.style.width = '0%';
        }
        if (this.sceneStageBar) {
            this.sceneStageBar.style.width = '0%';
        }
        
        // 重置项目阶段
        this.updateStage('project', 0, '等待开始...');
        this.projectStageIcon.textContent = '⏳';
        this.projectStageIcon.className = 'stage-icon';
        
        // 重置场景阶段
        this.updateStage('scene', 0, '等待开始...');
        this.sceneStageIcon.textContent = '⏳';
        this.sceneStageIcon.className = 'stage-icon';
        
        // 重置列表
        if (this.projectItemsList) {
            this.projectItemsList.style.display = 'none';
            this.projectItemsList.innerHTML = '';
        }
        
        // 隐藏加载动画，直接显示进度条
        if (this.spinner) this.spinner.style.display = 'none';
        if (this.title) this.title.textContent = '加载项目中';
        if (this.subtitle) this.subtitle.textContent = '正在准备您的工作环境...';
        
        if (isInitial) {
        } else {
        }
    }
    
    /**
     * 显示场景加载界面（单阶段）
     */
    showSceneLoading() {
        // 确保元素已初始化
        this.initializeElements();
        
        this.mode = 'scene';
        this.currentOverlay = this.sceneOverlay;
        
        if (!this.currentOverlay) {
            console.error('❌ 场景加载界面元素未找到');
            return;
        }
        
        // 隐藏项目加载界面（如果显示）
        if (this.projectOverlay) {
            this.projectOverlay.style.display = 'none';
        }
        
        // 显示场景加载界面
        this.currentOverlay.style.display = 'flex';
        this.currentOverlay.classList.remove('fade-out');
        
        // 获取通用元素
        this.spinner = this.currentOverlay.querySelector('.loading-spinner');
        this.title = this.currentOverlay.querySelector('.loading-title');
        this.subtitle = this.currentOverlay.querySelector('.loading-subtitle');
        
        // 重置状态
        this.currentProgress = 0;
        this.loadedItems = 0;
        this.loadingItems.clear();
        
        // 立即重置进度条
        if (this.singleSceneBar) {
            this.singleSceneBar.style.width = '0%';
        }
        
        // 重置场景阶段
        this.updateStage('single-scene', 0, '初始化...');
        this.singleSceneIcon.textContent = '🔄';
        this.singleSceneIcon.className = 'stage-icon loading';
        
        // 重置列表
        if (this.sceneItemsList) {
            this.sceneItemsList.style.display = 'none';
            this.sceneItemsList.innerHTML = '';
        }
        
        // 隐藏加载动画，直接显示进度条
        if (this.spinner) this.spinner.style.display = 'none';
        if (this.title) this.title.textContent = '加载场景中';
        if (this.subtitle) this.subtitle.textContent = '正在准备您的工作环境...';
    }
    
    /**
     * 更新指定阶段的进度
     * @param {string} stage - 'project', 'scene', 'single-scene'
     * @param {number} percent - 进度百分比 (0-100)
     * @param {string} detail - 详细信息
     */
    updateStage(stage, percent, detail = '') {
        const progress = Math.min(100, Math.max(0, percent));
        
        let icon, percentElement, bar, detailElement;
        
        if (stage === 'project') {
            icon = this.projectStageIcon;
            percentElement = this.projectStagePercent;
            bar = this.projectStageBar;
            detailElement = this.projectStageDetail;
        } else if (stage === 'scene') {
            icon = this.sceneStageIcon;
            percentElement = this.sceneStagePercent;
            bar = this.sceneStageBar;
            detailElement = this.sceneStageDetail;
        } else if (stage === 'single-scene') {
            icon = this.singleSceneIcon;
            percentElement = this.singleScenePercent;
            bar = this.singleSceneBar;
            detailElement = this.singleSceneDetail;
        }
        
        if (!bar) {
            console.warn(`⚠️ 进度条元素未找到: ${stage}`);
            return;
        }
        
        // 直接更新进度条 - 无过渡动画，立即响应
        bar.style.width = `${progress}%`;
        
        // 更新百分比文字
        if (percentElement) {
            percentElement.textContent = `${Math.round(progress)}%`;
        }
        
        // 更新详细信息
        if (detailElement && detail) {
            detailElement.textContent = detail;
        }
        
        // 更新图标状态
        if (icon) {
            if (progress === 0) {
                icon.textContent = '⏳';
                icon.className = 'stage-icon';
            } else if (progress === 100) {
                icon.textContent = '✅';
                icon.className = 'stage-icon completed';
            } else {
                icon.textContent = '🔄';
                icon.className = 'stage-icon loading';
            }
        }
    }
    
    /**
     * 设置总的加载项数量（用于场景加载）
     */
    setTotalItems(total) {
        this.totalItems = total;
        // 根据模式显示列表
        if (total > 0) {
            if (this.mode === 'project' && this.projectItemsList) {
                this.projectItemsList.style.display = 'block';
            } else if (this.mode === 'scene' && this.sceneItemsList) {
                this.sceneItemsList.style.display = 'block';
            }
        }
    }
    
    /**
     * 添加加载项
     */
    addLoadingItem(id, name, type = 'node') {
        const item = {
            id,
            name,
            type,
            status: 'pending'
        };
        
        this.loadingItems.set(id, item);
        
        // 根据模式选择列表
        const itemsList = this.mode === 'project' ? this.projectItemsList : this.sceneItemsList;
        if (!itemsList) return;
        
        // 添加到UI列表
        const itemElement = document.createElement('div');
        itemElement.className = 'loading-item';
        itemElement.id = `loading-item-${id}`;
        itemElement.innerHTML = `
            <span class="loading-item-icon">⏳</span>
            <span class="loading-item-text">${this.getItemIcon(type)} ${name}</span>
        `;
        
        itemsList.appendChild(itemElement);
    }
    
    /**
     * 更新加载项状态
     */
    updateLoadingItem(id, status, error = null) {
        const item = this.loadingItems.get(id);
        if (!item) return;
        
        item.status = status;
        
        const itemElement = document.getElementById(`loading-item-${id}`);
        if (!itemElement) return;
        
        // 更新UI
        itemElement.className = `loading-item ${status}`;
        
        const iconSpan = itemElement.querySelector('.loading-item-icon');
        switch (status) {
            case 'loading':
                iconSpan.textContent = '🔄';
                break;
            case 'completed':
                iconSpan.textContent = '✅';
                this.loadedItems++;
                break;
            case 'error':
                iconSpan.textContent = '❌';
                if (error) {
                    console.error(`❌ 加载失败: ${item.name}`, error);
                }
                this.loadedItems++;
                break;
        }
        
        // 更新场景阶段进度
        if (this.totalItems > 0) {
            const progress = Math.round((this.loadedItems / this.totalItems) * 100);
            const stage = this.mode === 'project' ? 'scene' : 'single-scene';
            this.updateStage(stage, progress, `正在加载: ${item.name}`);
        }
        
        // 滚动到当前项
        itemElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    
    /**
     * 隐藏加载界面（直接关闭，无淡出）
     */
    hideImmediately() {
        if (!this.currentOverlay) return;
        
        // 直接隐藏，不使用淡出动画
        this.currentOverlay.style.display = 'none';
        this.currentOverlay.classList.remove('fade-out');
    }
    
    /**
     * 隐藏加载界面（带淡出动画）
     */
    async hide() {
        if (!this.currentOverlay) return;
        
        // 添加淡出动画
        this.currentOverlay.classList.add('fade-out');
        
        // 等待动画完成
        await this.delay(500);
        
        // 完全隐藏
        this.currentOverlay.style.display = 'none';
    }
    
    /**
     * 完整的项目加载流程
     * @param {Function} loadCallback - 加载回调函数
     * @param {boolean} isInitial - 是否是初始加载（页面加载时）
     */
    async performProjectLoading(loadCallback, isInitial = false) {
        // 记录开始时间，用于计算最小显示时间
        const startTime = Date.now();
        const minDisplayTime = 800; // 最小显示时间：800毫秒
        
        try {
            // 显示项目加载界面（如果是初始加载，界面已经显示了）
            this.showProjectLoading(isInitial);
            
            // 执行加载回调
            await loadCallback(this);
            
            // 确保两个阶段都完成
            this.updateStage('project', 100, '完成');
            this.updateStage('scene', 100, '完成');
            
            // 计算已经显示的时间
            const elapsedTime = Date.now() - startTime;
            const remainingTime = Math.max(0, minDisplayTime - elapsedTime);
            
            if (remainingTime > 0) {
                await this.delay(remainingTime);
            }
            
            // 等待一小段时间让用户看到完成状态
            await this.delay(300);
            
            // 直接关闭，无淡出
            this.hideImmediately();
            
            return true;
        } catch (error) {
            console.error('❌ 项目加载失败:', error);
            await this.delay(2000);
            this.hideImmediately();
            return false;
        }
    }
    
    /**
     * 完整的场景加载流程
     * @param {Function} loadCallback - 加载回调函数
     */
    async performSceneLoading(loadCallback) {
        // 记录开始时间，用于计算最小显示时间
        const startTime = Date.now();
        const minDisplayTime = 600; // 最小显示时间：600毫秒
        
        try {
            // 显示场景加载界面
            this.showSceneLoading();
            
            // 执行加载回调
            await loadCallback(this);
            
            // 确保场景阶段完成
            this.updateStage('single-scene', 100, '完成');
            
            // 计算已经显示的时间
            const elapsedTime = Date.now() - startTime;
            const remainingTime = Math.max(0, minDisplayTime - elapsedTime);
            
            if (remainingTime > 0) {
                await this.delay(remainingTime);
            }
            
            // 等待一小段时间让用户看到完成状态
            await this.delay(300);
            
            // 直接关闭，无淡出
            this.hideImmediately();
            
            return true;
        } catch (error) {
            console.error('❌ 场景加载失败:', error);
            await this.delay(2000);
            this.hideImmediately();
            return false;
        }
    }
    
    /**
     * 获取项目类型的图标
     */
    getItemIcon(type) {
        const icons = {
            'node': '📦',
            'model': '🎨',
            'geometry': '🔷',
            'empty': '📁',
            'group': '📂',
            'scene': '🌍'
        };
        return icons[type] || '📦';
    }
    
    /**
     * 延迟函数
     */
    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// 创建全局实例
const sceneLoader = new SceneLoader();

// 导出
export default sceneLoader;
